<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="" rel="stylesheet">
	<style>
		.t-o{
			width:100px;
			text-overflow: ellipsis;
			/*text-overflow: clip;表示剪切*/
			white-space:nowrap;
			overflow: hidden;
		}
		.t-s{
			font:normal 25px/50px "微软雅黑";
			width:300px;
			height:50px;
			text-shadow:1px 1px 1px black;
		}
	</style>
</head>
<body>
	<div class="t-o">
		我是一段比较长的文字我是一段比较长的文字我是一段比较长的文字我是一段比较长的文字我是一段比较长的文字
	</div>
	
	<div class="t-s">这是一段有阴影的文字</div>
	
	<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>